<template>
  <div>
    <input v-model="text"><br />
    <div v-if="result === 'unknown'">
      <p>Input invalid!</p>
    </div>
    <div v-else-if="result === 'int'">
      <p>Is integer.</p>
    </div>
    <div v-else-if="result === 'float'">
      <p>Is float.</p>
    </div>
    <div v-else-if="result === 'empty'">
      <p>Is empty.</p>
    </div>
    <div v-else-if="result === 'inputting'">
      <p>waiting...</p>
    </div>
    <div v-else>
      <p>hello</p>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "ifelse",
  data: function() {
    return {
      result: "",
      text: "",
    }
  },
  created: function () {
    this.debouncedCalc = _.debounce(this.calc, 200)
  },
  methods: {
    calc: function () {
      if (/^[\d]+$/.test(this.text))
        this.result = "int"
      else if (/^[\d]+\.[\d]+$/.test(this.text))
        this.result = "float"
      else if (/^[\s]*$/.test(this.text))
        this.result = "empty"
      else
        this.result = "unknown"
    }
  },
  watch: {
    text: function () {
      this.result = "inputting"
      this.debouncedCalc()
    }
  },
}
</script>

<style scoped>

</style>